<template>
  <view class="custom-tabbar">
    <view 
      class="tabbar-item" 
      :class="{ active: currentTab === 'index' }"
      @tap="goToStudentIndex"
    >
      <image 
        class="tabbar-icon" 
        :src="currentTab === 'index' ? '/static/tabBar-index-selected.png' : '/static/tabBar-index.png'" 
        mode="aspectFit" 
      />
      <text class="tabbar-text" :class="{ active: currentTab === 'index' }">首页</text>
    </view>
    <view 
      class="tabbar-item" 
      :class="{ active: currentTab === 'learning' }"
      @tap="goToLearningStatus"
    >
      <image 
        class="tabbar-icon" 
        :src="currentTab === 'learning' ? '/static/tabBar-learningStatus-selected.png' : '/static/tabBar-learningStatus.png'" 
        mode="aspectFit" 
      />
      <text class="tabbar-text" :class="{ active: currentTab === 'learning' }">学情</text>
    </view>
    <view 
      class="tabbar-item" 
      :class="{ active: currentTab === 'training' }"
      @tap="goToTraining"
    >
      <image 
        class="tabbar-icon" 
        :src="currentTab === 'training' ? '/static/tabBar-training-selected.png' : '/static/tabBar-training.png'" 
        mode="aspectFit" 
      />
      <text class="tabbar-text" :class="{ active: currentTab === 'training' }">练习</text>
    </view>
    <view 
      class="tabbar-item" 
      :class="{ active: currentTab === 'mine' }"
      @tap="goToMineStudents"
    >
      <image 
        class="tabbar-icon" 
        :src="currentTab === 'mine' ? '/static/tabBar-mine-selected.png' : '/static/tabBar-mine.png'" 
        mode="aspectFit" 
      />
      <text class="tabbar-text" :class="{ active: currentTab === 'mine' }">我的</text>
    </view>
  </view>
</template>

<script setup>
// 定义props来接收当前选中的tab
const props = defineProps({
  currentTab: {
    type: String,
    default: 'index' // 默认选中首页
  }
})

// TabBar导航函数
const goToStudentIndex = () => {
  uni.switchTab({
    url: '/pages/studentsPage/student-index'
  })
}

const goToLearningStatus = () => {
  uni.switchTab({
    url: '/pages/studentsPage/learningStatus'
  })
}

const goToTraining = () => {
  uni.switchTab({
    url: '/pages/studentsPage/training'
  })
}

const goToMineStudents = () => {
  uni.switchTab({
    url: '/pages/studentsPage/mineStudents'
  })
}
</script>

<style scoped lang="scss">
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #f0f0f0;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 12rpx 0;
  transition: all 0.3s ease;
}

.tabbar-item:active {
  transform: scale(0.95);
}

.tabbar-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 8rpx;
}

.tabbar-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 20rpx;
  color: #68708A;
  line-height: 20rpx;
}

.tabbar-text.active {
  color: #2676FF;
}
</style>
